import { Column } from '@ant-design/charts';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccessful} from "@/utils/utils";
import {UserManager} from "@/services/api-functions";
import {Col, Row} from "antd";
import ProCard from "@ant-design/pro-card";



const KanBanData: React.FC<any> = ({}) => {
  const [data, setData] = useState<any>(false);
  useEffect(async () => {
    let rsp = await UserManager.kanbanData()
    if (isSuccessful(rsp)) {
      setData(rsp.data)
    }
  }, []);

  const charlesConfig = (data: any) => {
  var config = {
    data: data,
    xField: 'name',
    yField: 'num',
    loading: false,
    columnWidthRatio: 0.7,
    label: {
      layout: [
        { type: 'interval-adjust-position' },// 数据标签自动调整位置
        { type: 'interval-hide-overlap' }, // 数据标签防遮挡
        { type: 'adjust-color' }, // 数据标签文颜色自动调整
      ],
    },
    meta: {
      name: { alias: '姓名' },
      num: { alias: '答题数' },
    },
  };
  return config
}
// 点击图表，只有点击在图表实际位置data才会有数据
const onReadyColumn = (plot: any) => {
  plot.on('plot:click', (...args: any) => {
    const data = args[0].data?.data
    console.log(data);
  });
};

  return (
    <PageContainer>
       <ProCard title="答题总数TOP5" bordered={false} size="small">
         <Column {...charlesConfig(data.totalRanks??[])} />
       </ProCard>
      <ProCard title="答题正确总数TOP5" bordered={false} size="small">
        <Column {...charlesConfig(data.yesRanks??[])} />
      </ProCard>
      <ProCard title="答题错误总数TOP5" bordered={false} size="small">
        <Column {...charlesConfig(data.noRanks??[])} onReady={onReadyColumn}/>
      </ProCard>
    </PageContainer>
  );
};

export default KanBanData;

